<!-- 人事-考勤管理-考勤组设置 -->
<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="考勤组名称" prop="name" label-width="fit-content">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入考勤组名称"
          clearable
          @keyup.enter="handleQuery"
          class="!w-160px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['school:attendance:setting:team:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap v-loading="loading">
    <el-table :data="tableData" :height="tableHeight" style="width: 100%">
      <el-table-column label="考勤组名称" min-width="180" prop="name" show-overflow-tooltip />
      <el-table-column label="考勤组成员" min-width="250" prop="members" show-overflow-tooltip>
        <template #default="{ row }">
          <span>{{ row.members.map((obj) => obj.name).join('、') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="考勤班次" min-width="300" prop="shifts">
        <template #default="scope">
          <template v-for="(item, index) in scope.row.shifts">
            <span v-if="scope.row.shifts.length <= 3" :key="index"
              >{{ item.name }}&nbsp;{{ item.times[0].first_day_after == 0 ? '当日' : '次日'
              }}{{ item.times[0].work_hours }}-{{
                item.times[0].second_day_after == 0 ? '当日' : '次日'
              }}{{ item.times[0].off_hours }}
              <span v-if="item.times.length > 1">
                {{ item.times[1].first_day_after == 0 ? '当日' : '次日'
                }}{{ item.times[1].work_hours }} -
                {{ item.times[1].second_day_after == 0 ? '当日' : '次日'
                }}{{ item.times[1].off_hours }}
              </span>
            </span>
          </template>
          <el-popover
            v-if="scope.row.shifts.length > 3"
            placement="top-start"
            trigger="hover"
            width="400"
          >
            <span v-for="(item, index) in scope.row.shifts" :key="index"
              >{{ item.name }}&nbsp;{{ item.times[0].work_hours }}-{{
                item.times[0].off_hours
              }}、</span
            >
            <template #reference>
              <div>
                <span v-for="(item, index) in scope.row.shifts" v-show="index <= 2" :key="index">
                  {{ item.name }}&nbsp;{{ item.times[0].work_hours }}-{{
                    item.times[0].off_hours
                  }}&nbsp;<span>{{ index < 2 ? '、' : '...' }}</span>
                </span>
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="created_at" width="180" />
      <el-table-column fixed="right" label="操作" width="130">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['school:attendance:setting:team:update']"
            type="text"
            @click="editFn(row)"
            >编辑</el-button
          >
          <el-button
            v-hasPermi="['school:attendance:setting:team:delete']"
            type="text"
            @click="deleteFn(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="where.page"
      v-model:limit="where.limit"
      @pagination="pageChange"
    />
  </ContentWrap>
  <!-- 查看未设置考勤组人员 -->
  <el-drawer :before-close="handleClose" v-model="drawer" size="700px" title="未设置考勤组人员">
    <!-- 表格 -->
    <div class="box">
      <el-table ref="multipleTable" :data="listData" style="width: 100%" tooltip-effect="dark">
        <el-table-column label="人员姓名" prop="name" />
        <el-table-column label="部门" prop="position">
          <template #default="scope">
            <div
              v-for="(item, index) in scope.row.frames"
              :key="index"
              class="frame-name over-text"
            >
              <span class="icon-h">
                {{ item.name
                }}<span v-show="item.is_mastart === 1 && scope.row.frames.length > 1" title="主部门"
                  >(主)</span
                >
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="职位" prop="job.name" />
      </el-table>
      <el-pagination
        :current-page="list.page"
        :page-size="list.limit"
        :page-sizes="[15, 20, 30]"
        :total="totalList"
        layout="total,sizes, prev, pager, next, jumper"
        @size-change="listSizeChange"
        @current-change="listPageChange"
      />
    </div>
  </el-drawer>
</template>

<script>
import { mapState } from 'pinia'
// import oaFromBox from '@/components/common/oaFromBox'
import a from './mock'
import { useUserStore } from '@/store/modules/user'
const { attendanceGroupListApi, deleteAttendanceGroup, attendanceUnattendedMember } = a
export default {
  // components: { oaFromBox },
  data() {
    return {
      loading: false,
      total: 0,
      totalList: 0,
      where: {
        page: 1,
        limit: 15,
        name: '',
        sort_value: '',
        sort_field: ''
      },
      queryParams: {
        name: ''
      },
      drawer: false,
      tableData: [],
      listData: [],
      search: [
        {
          field_name: '考勤组名称,人员姓名',
          field_name_en: 'name',
          form_value: 'input'
        }
      ],
      dropdownList: [
        {
          label: '未设置考勤组人员',
          value: 1
        }
      ],
      list: {
        page: 1,
        limit: 15
      }
    }
  },
  computed: {
    ...mapState(useUserStore, {
      userInfo: 'user'
    })
  },
  mounted() {
    this.getList()
    this.getdata()
  },

  methods: {
    confirmData(data) {
      if (data == 'reset') {
        this.where.name = ''
      } else {
        for (const item in data) {
          this.where[item] = data[item]
        }
      }

      this.getList(1)
    },
    async getList(val) {
      if (val) {
        this.where.page = val
      }
      this.loading = true
      const result = await attendanceGroupListApi(this.where)
      this.loading = false
      console.log(result, '---result')
      this.total = result.data.count
      this.tableData = result.data.list
    },
    async getdata() {
      const result = await attendanceUnattendedMember(this.list)
      this.totalList = result.data.count
      this.listData = result.data.list
    },

    deleteFn(val) {
      this.$modalSure('你确定要删除这条数据吗').then(() => {
        deleteAttendanceGroup(val.id).then((res) => {
          let totalPage = Math.ceil((this.total - 1) / this.where.limit)
          let currentPage = this.where.page > totalPage ? totalPage : this.where.page
          this.where.page = currentPage < 1 ? 1 : currentPage
          this.getList()
        })
      })
    },
    handleQuery() {},
    resetQuery() {
      this.$refs.queryFormRef.resetFields()
    },
    openForm() {
      this.addFn()
    },
    handleClose() {
      this.drawer = false
    },
    pageChange() {
      this.getList()
    },
    listSizeChange({ limit }) {
      this.list.limit = limit
      this.getdata()
    },
    listPageChange(val) {
      this.list.page = val
      this.getdata()
    },
    handleSizeChange(val) {
      this.where.limit = val
      this.getList()
    },
    addFn() {
      this.$router.push({
        path: `/school/attendance/setting/addConent`,
        query: {}
      })
    },
    infoFn() {},
    editFn(val) {
      this.$router.push({
        path: `/school/attendance/setting/addConent`,
        query: { id: val.id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.from {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.info {
  color: #1890ff;
  cursor: pointer;
}

.card-box {
  min-height: calc(100vh - 65px);
}

.frame-name {
  .iconfont {
    padding-right: 6px;
  }
}

.icon-h {
  position: relative;

  & > span {
    color: #1890ff;
  }
}

.box {
  padding: 20px;
}
</style>
